<template>
	<view>
		<up-navbar leftIconColor="#FFFFFF" leftIconSize="44rpx" title="问题反馈" :autoBack="true" placeholder
			bgColor="transparent">
		</up-navbar>

		<view class="main">
			<view class="input">
				<up-textarea maxlength="-1" v-model="data.content" placeholder="请输入反馈内容" border="none"
					height="220"></up-textarea>
			</view>
			<up-gap height="60rpx"></up-gap>
			<view class="mintitle">截图视频</view>
			<up-gap height="20rpx"></up-gap>
			<view class="flex wrap">
				<template v-for="(item,index) in data.fishImgs" :key="index">
					<image v-if="isImageOrVideoUrl(item) === 'image'" :src="item" mode="aspectFill" class="saveImg"
						@longpress="longpress(index)" />
					<video style="object-fit: fill" object-fit="cover" v-else :src="item" mode="aspectFill" class="saveImg"
						@longpress="longpress(index)" />
				</template>
				<view class="v-upload" v-if="data.fishImgs.length<9">
					<image src="https://ryyf.wangjintech.cn/static/image/common/15.png" @click="uploadImg" />
				</view>
			</view>
		</view>
		<view class="v-button" style="bottom: 110rpx;" @click="verify">提交反馈</view>
	</view>
</template>

<script setup>
	import {
		msg,
		back,
		isImageOrVideoUrl
	} from "@/utils/tool.js"
	import {
		reactive,
		ref
	} from 'vue';
	import upload from "@/utils/upload.js"
	import openApi from "@/api/biz/open.js"

	function verify() {
		if (!data.content.trim()) return msg("请输入反馈内容")
		sumbit()
	}

	function sumbit() {
		uni.showLoading({
			title: "正在发布",
			mask: true
		})
		openApi.createFeedback({
			...data,
			img: data.fishImgs.join(","),
			fishImgs: undefined
		}).then((res) => {
			uni.hideLoading()
			if (res.code === 0) {
				msg("提交成功");
				back()
			}
		})
	}

	const data = reactive({
		content: "",
		img: "",
		fishImgs: [],
	})

	function longpress(index) {
		uni.showModal({
			title: "是否删除当前选中文件",
			success(res) {
				if (res.confirm) {
					data.fishImgs.splice(index, 1);
				}
			}
		})
	}

	function uploadImg() {
		uni.chooseMedia({
			count: 1,
			mediaType: ['image', 'video'],
			sourceType: ['album', 'camera'],
			maxDuration: 30,
			camera: 'back',
			success(res) {
				if (res.errMsg === 'chooseMedia:ok') {
					uploadAfter(res.tempFiles[0].tempFilePath);
				}
			}
		})
	}

	function uploadAfter(file) {
		upload(file).then((res) => {
			data.fishImgs.push(res.data)
			if (data.img.length === 1) msg("长按即可删除已上传图片")
		})
	}
</script>

<style>
	page {
		background-color: #1B1829;
	}
</style>
<style scoped lang="scss">
	.main {
		.saveImg {
			width: 150rpx;
			height: 150rpx;
			margin-right: 15rpx;
			margin-bottom: 15rpx;
			border-radius: 16rpx;
		}

		.mintitle {
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
		}

		.input {
			width: 690rpx;
			background: #25223B;
			border-radius: 40rpx;

			:deep(.u-textarea) {
				background-color: #25223B !important;
			}
		}

		padding: 30rpx;
	}
</style>